import React from 'react';
import {Link} from 'react-router-dom';
import Tool from  'tool/tool.jsx';
import User from  'service/user-service.jsx';
const _req = new Tool();
const _user = new User();

class TopNav extends React.Component{
  constructor(props){
    super(props);
    this.state={
        username:_req.getLocalStorage('userInfo').username || ''
    }
  }
  //退出登录
  LogOut(){
      _user.loginOut().then(res => {
        _req.removeLocalStorage('userInfo');
        //TopNav组件没有使用Route，所以不能使用this.props.history.push('/login'),缺点：login页面会重新加载，而不是渲染组件的方式
          window.location.href= "/login";
       },errMsg => {
           _req.errorTips(errMsg);
       });
  }
  render(){
    return(
      <div className="navbar navbar-default top-navbar">
            <div className="navbar-header">
                <Link className="navbar-brand" to="/"><b>hou</b>system</Link>
            </div>
            <ul className="nav navbar-top-links navbar-right">
                <li className="dropdown">
                    <a className="dropdown-toggle" href="javascript:;" >
                        <i className="fa fa-user fa-fw"></i> 
                        {
                            this.state.username 
                            ?  <span>欢迎, {this.state.username}</span>
                            :  <span>欢迎您</span>
                        }
                        <i className="fa fa-caret-down"></i>
                    </a>
                    <ul className="dropdown-menu dropdown-user">
                        <li>
                            <span onClick={()=>{this.LogOut()}}>
                                <i className="fa fa-sign-out fa-fw"></i>
                                <span>退出登录</span> 
                            </span>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    );
  }
}
export default TopNav;